/* CodeDemo 组件的全局样式 */
.vp-doc .code-demo {
  /* border: 1px solid var(--vp-c-border); */
  border-radius: 8px;
  margin: 16px 0;
  overflow: hidden;
  background: var(--vp-c-bg);
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
}

/* 覆盖 VitePress 默认主题的代码块样式 */
.vp-doc .code-demo .demo-code .vp-code-group,
.vp-doc .code-demo .demo-code .vp-adaptive-theme,
.vp-doc .code-demo .demo-code div[class*="language-"],
.vp-doc .code-demo .demo-code .highlight-lines {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* 强制覆盖 VitePress 代码高亮容器 */
.vp-doc .code-demo .demo-code div[class*="language-"] {
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.vp-doc .code-demo .demo-code div[class*="language-"] pre {
  overflow: visible !important;
  margin: 0 !important;
  padding: 16px !important;
  max-height: none !important;
  height: auto !important;
}

.vp-doc .code-demo .demo-showcase {
  padding: 24px;
  background: var(--vp-c-bg-soft);
  border-bottom: 1px solid var(--vp-c-border);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.vp-doc .code-demo .demo-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--vp-c-bg-alt);
  /* border-bottom: 1px solid var(--vp-c-border); */
}

.vp-doc .code-demo .action-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  /* border: 1px solid var(--vp-c-border); */
  border-radius: 4px;
  /* background: var(--vp-c-bg); */
  color: var(--vp-c-text-1);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--vp-font-family-base);
}
.vp-doc .code-demo .action-button .action-icon {
  display: block;
  width: 16px;
  height: auto;
}

.vp-doc .code-demo .action-button:hover {
  border-color: var(--vp-c-brand-1);
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
}

.vp-doc .code-demo .action-button.active {
  border-color: var(--vp-c-brand-1);
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
}

.vp-doc .code-demo .copy-button.action-button {
  /* margin-left: auto; */
}

/* 底部隐藏按钮样式 */
.vp-doc .code-demo .demo-code-footer {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  background: var(--vp-c-bg-alt);
  /* 移除边框，让底部按钮融入代码块 */
  position: relative;
  z-index: 10; /* 设置层级高于代码块 */
  border-top: 1px solid var(--vp-c-divider-light); /* 添加微妙的分隔线 */
}

.vp-doc .code-demo .hide-code-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
  color: var(--vp-c-text-3);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--vp-font-family-base);
  background: transparent; /* 按钮背景透明，使用 footer 区域的背景色 */
  border: none;
  /* 让按钮更加低调，不要过于突出 */
  opacity: 0.7;
}

.vp-doc .code-demo .hide-code-button:hover {
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
  opacity: 1;
}

.vp-doc .code-demo .demo-code {
  background: var(--vp-c-bg-mute);
  /* 完全移除任何可能导致滚动的属性 */
  overflow: visible !important;
  height: auto !important;
  position: relative;
  z-index: 1; /* 设置基础层级 */
}

.vp-doc .code-demo .demo-code pre {
  margin: 0 !important;
  padding: 16px !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow: visible !important; /* 确保不产生滚动条 */
  white-space: pre-wrap !important; /* 自动换行 */
  word-wrap: break-word !important; /* 长单词换行 */
}

.vp-doc .code-demo .demo-code code {
  background: transparent !important;
  font-family: var(--vp-font-family-mono) !important;
  overflow: visible !important; /* 确保 code 标签也不产生滚动条 */
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

/* 深色模式适配 */
.dark .vp-doc .code-demo {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 640px) {
  .vp-doc .code-demo .demo-showcase {
    padding: 16px;
  }
  
  .vp-doc .code-demo .demo-actions {
    padding: 6px 12px;
    flex-wrap: wrap;
  }
  
  .vp-doc .code-demo .action-button {
    font-size: 12px;
    padding: 4px 8px;
  }
}

/* 过渡动画增强 */
.code-slide-enter-active,
.code-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.code-slide-enter-from,
.code-slide-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
}

.code-slide-enter-to,
.code-slide-leave-from {
  max-height: none !important; /* 移除高度限制，让内容完全展开 */
  opacity: 1;
  transform: translateY(0);
}

/* 确保动画完成后移除任何overflow限制 */
.vp-doc .code-demo .demo-code.code-slide-enter-to {
  overflow: visible !important;
  max-height: none !important;
}

/* =========================== */
/* VitePress 默认主题强制覆盖 */
/* =========================== */

/* 隐藏代码行号 */
/* .vp-doc .code-demo .line-numbers,
.vp-doc .code-demo .line-numbers-wrapper,
.vp-doc .code-demo [class*="line-number"],
.vp-doc .code-demo .line-number {
  display: none !important;
} */

/* 覆盖所有可能的 VitePress 代码块样式 */
.vp-doc .code-demo pre[class*="language-"],
.vp-doc .code-demo code[class*="language-"],
.vp-doc .code-demo .shiki,
.vp-doc .code-demo .highlight {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

/* 覆盖 VitePress 的 .vp-code */
.vp-doc .code-demo .vp-code {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* 覆盖任何可能的滚动容器 */
.vp-doc .code-demo [data-language],
.vp-doc .code-demo .language-vue,
.vp-doc .code-demo .language-js,
.vp-doc .code-demo .language-ts,
.vp-doc .code-demo .language-html,
.vp-doc .code-demo .language-css {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* 最高优先级覆盖 */
.vp-doc .code-demo * {
  max-height: none !important;
}

.vp-doc .code-demo *:not(.demo-showcase):not(.demo-actions):not(.demo-code-footer) {
  overflow: visible !important;
}